<div>
  <form class="post-editor-form" [formGroup]="postForm" (ngSubmit)="submit()">
    <mat-form-field class="post-editor-title">
      <input matInput placeholder="Title" formControlName="title">
      <mat-error *ngIf="postForm.controls.title.dirty && postForm.controls.title.errors?.required">
        Please fill in the title.
      </mat-error>
      <mat-error *ngIf="postForm.controls.title.dirty && postForm.controls.title.errors?.minlength">
        The minimum length of title is 20 characters.
      </mat-error>
      <mat-error *ngIf="postForm.controls.title.dirty && postForm.controls.title.errors?.maxlength">
        The maximum length of title is 100 characters.
      </mat-error>
    </mat-form-field>    
    <editor apiKey="ei3plofo50c0t9rb92yityvng1z3k5yqh3pwthsp1vfecssl" [init]="editorSettings" formControlName="body"></editor>
    <section *ngIf="postForm.controls.body.dirty" class="body-error">
      <p class="mat-caption" *ngIf="postForm.controls.body.errors?.required">
        Please fill in the body.
      </p>
      <p class="mat-caption" *ngIf="postForm.controls.body.errors?.minlength">
        The minimum length of body is 100 characters.
      </p>
    </section>
    <button type="submit" mat-raised-button color="primary" class="submit-button" [disabled]="!postForm.valid">Save</button>
  </form>
</div>
